<template>
    <view>
        <view class="tab-top">
            <view :class="active === 0 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 0">全部</view>
            <view :class="active === 1 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 1">待付款</view>
            <view :class="active === 3 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 3">待使用</view>
            <view :class="active === 4 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 4">待评价</view>
        </view>
        <view class="content">
            <swiper :current="active" @change="swiperChange" class="swiper">
                <block v-for="(item, index) in orderType" :key="index">
                    <swiper-item>
                        <scroll-view style="height:100%" scroll-y @scrolltolower="scrollHandle">
                            <block v-for="(item1, index1) in orderList" :key="index1">
                                <view class="order-item">
                                    <view class="order-title">
                                        <view class="order-number">订单编号：{{item1.internal_order_sn}}</view>
                                        <view class="order-type"><text :style="'color:' + orderTypeColor[item1.order_status]">{{orderType[item1.order_status]}}</text></view>
                                    </view>
                                    <view class="order-info">
                                        <view class="order-img">
                                            <img :src="item1.detail[0].spu.commodity_image_thum" alt="" style="width:100%;height:100%">
                                        </view>
                                        <view class="order-info-right">
                                            <view class="order-name">{{item1.detail[0].spu_name}}</view>
                                            <view class="order-price">
                                                <view style="color:#FF1E1E;font-size:36rpx">￥{{item1.order_total_price}}</view>
                                                <view style="display:flex;position:absolute;right:70rpx;top:180rpx">
                                                    <i class="iconfont icon-chenghao" style="color:#333333;line-height:40rpx"></i>
                                                    <text style="color:#666666;font-size:28rpx">{{item1.detail[0].number}}</text>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                    <!-- <view class="order-handle"> -->
                                        <!-- <view class="canel-order">取消订单</view> -->
                                        <!-- <view class="pay">付款</view> -->
                                    <!-- </view> -->
                                </view>
                            </block>
                        </scroll-view>
                    </swiper-item>
                </block>
            </swiper>
        </view>
        <noOrder :showNoOrder="showNoOrder"></noOrder>
    </view>
</template>
    
<script>
import { OrderModel } from '../../model/order'
import noOrder from '../../components/no-order/no-order'
const orderModel = new OrderModel()
export default {
    components: {
        noOrder
    },
    data() {
        return {
            orderType: ["全部", "待付款", "", "待使用", "待评价"],
            orderTypeColor: ["", "#FF1E1E", "#24C79C", "#24C79C", "#24C79C"],
            active: 0,
            page: 1,
            orderList: [],
            flag: true,
            showNoOrder: false
        }
    },
    methods: {
        swiperChange(e) {
            this.active = e.detail.current
            this.orderList = []
            this.page = 1
            this.getOrderByStatus()
        },
        goUseVirtualOrder() {
            uni.navigateTo({
                url: '/pagesC/order-virtual-use/order-virtual-use'
            })
        },
        // 获取虚拟订单
        _getUserOrder(data) {
            orderModel.getUserOrder(data).then((res) => {
                if(res.code == 200) {
                    this.orderList = this.orderList.concat(res.data.data)
                    res.data.data.length == 0 ? this.flag = false : this.flag = true
                    if(this.orderList.length == 0) {
                        this.showNoOrder = true
                    }else {
                        this.showNoOrder = false
                    }
                }
            })
        },
        // 通过订单状态获取订单信息
        getOrderByStatus() {
            let data = {
                commodity_type: 1,
                order_status: this.active,
                page: this.page
            }
            this._getUserOrder(data)
        },
        // 滚动分页
        scrollHandle() {
            if(this.flag == true) {
                this.page = this.page + 1
                this.getOrderByStatus()
            }
        },
    },
    onLoad(option) {
        console.log(option)
        this.active = parseInt(option.orderStatus)
        if(this.active == 0) {
            this.getOrderByStatus()
        }
    }
}
</script>

<style>
    .tab-top {
        height: 85rpx;
        background: rgba(255,255,255,1);
        color: #333333;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 85rpx;
        padding: 0 55rpx;
        display: flex;
        justify-content: space-between;
    }
    .active {
        color: #24C79C;
    }
    .tab-top-item {
        position: relative;
    }
    .active::after {
        content: '';
        position: absolute;
        bottom: 11rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 37rpx;
        height: 4rpx;
        background: #24C79C;
    }
    .content {
        height: 1362rpx;
    }
    .swiper {
        width: 100%;
        height: 100%;
    }
    .order-item {
        width: 620rpx;
        height: 320rpx;
        margin: 20rpx auto 0;
        padding: 22rpx 27rpx;
        background:rgba(255,255,255,1);
        border-radius:10px; 
    }
    .order-item:last-child {
        margin-bottom: 156rpx;
    }
    .order-title {
        display: flex;
        justify-content: space-between;
    }
    .order-number {
        color: #333333;
        font-size: 26rpx;
        font-weight: 500;
    }
    .order-type {
        color: #FF1E1E;
        font-size: 28rpx;
        font-weight: 500;
    }
    .order-info {
        display: flex;
        justify-content: left;
        margin-top: 36rpx;
    }
    .order-img {
        width: 198rpx;
        height: 198rpx;
    }
    .order-info-right {
        margin-left: 30rpx;
    }
    .order-name {
        width: 247rpx;
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        overflow: hidden;
        text-overflow:  ellipsis;
        white-space: nowrap;
    }
    .order-price {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
    }
    .order-text {
        color: #999999;
        font-size: 24rpx;
        margin-top: 31rpx;
    }
    .order-handle {
        display: flex;
        justify-content: flex-end;
    }
    .canel-order {
        width: 148rpx;
        height: 46rpx;
        border: 1rpx solid rgba(229,229,229,1);
        border-radius: 23rpx;
        color: #999999;
        font-size: 28rpx;
        font-weight:500;
        text-align: center;
        line-height: 46rpx;
        margin-right: 26rpx;
    }
    .pay {
        width: 122rpx;
        height: 46rpx;
        border: 1rpx solid rgba(36,199,156,1);
        border-radius: 23rpx;
        font-weight:500;
        font-size: 28rpx;
        color:rgba(36,199,156,1);
        text-align: center;
        line-height: 46rpx;
    }
</style>